<template>
  <Module :cfg="moduleCfg">
    <div class="item-group" v-if="data.length>0">
      <!--      <HBarChart :data="getChartData['hBarData']" :cfg="hBarChartCfg"-->
      <!--            style="width: 38%"></HBarChart>-->
      <div class="cameraCount" style="width: 28%">
        <div>
          <h5>
            {{getChartData['hBarData']['value'][0]+getChartData['hBarData']['value'][1]}}台
          </h5>
          <h4>
            摄像机总数
          </h4>
        </div>

        <div>
          <h5>
            {{getChartData['hBarData']['value'][1]}}台
          </h5>
          <h4>
            故障数
          </h4>
        </div>
      </div>
      <PieChart :data="getChartData['pieData']" :cfg="pieChartCfg"
                style="width: 72%"></PieChart>
    </div>
  </Module>
</template>

<script>
  import Module from 'comp/common/Module';
  // import HBarChart from 'kkui/echarts/HBarChart';
  import PieChart from 'kkui/echarts/PieChart2';

  export default {
    name: "CameraInfo",
    components: {
      Module,
      // HBarChart,
      PieChart
    },
    props: ['data'],
    data() {
      return {
        moduleCfg: {
          icon: WebCfg.icons.cameraInfo,
          title: `摄像机工况`
        },
        hBarChartCfg: {
          top: 10,
          barWidth: 15,
          labelFontSize: 14,
          unit: '台'
        },
        pieChartCfg: {
          radius: ['60%', '80%'],
          bigFontSize: 16,
          smallFontSize: 14,
          unit: '台'
        }
      }
    },
    computed: {
      getChartData() {
        const data = this.data;
        const hBarData = {name: ['正常', '非正常'], value: [], allNum: 0}, pieData = [];
        let errorNum = 0, allNum = 0;
        data.forEach(item => {
          if (item.name === '正常') {
            hBarData.value.push(item.value);
            allNum += item.value;
            pieData.unshift({
              ...item,
              itemStyle: {
                color: '#1296DB'
              }
            })
          } else {
            errorNum += item.value;
            allNum += item.value;
            pieData.push({
              ...item,
              itemStyle: {
                color: WebCfg.eventColor[item.code]
              }
            })
          }
        });
        hBarData.value.push(errorNum);
        hBarData.allNum = allNum;
        return {
          hBarData,
          pieData
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .cameraCount {
    padding: 5px;
    display: flex;
    flex-direction: column;
    gap: 10px;

    > div {
      display: flex;
      flex-direction: column;
      height: 50%;
      justify-content: center;

    }

    h4 {
      text-align: center;
      color: var(--font-green-color);
    }

    h5 {
      font-weight: bold;
      font-size: 20px;
      text-align: center;
      color: #999
    }
  }

</style>
